<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../jquery.min.js"></script>
</head>

<body>
    <input value="">
    <button>按钮</button>
    <button class="sky">按钮1</button>
    <script>
        //【区别与注意事项】
        // 三个函数存在的区别, 用一句话来说的话就是: bind是返回对应函数, 便于稍后调用; apply, call则是立即调用. 除此外, 在 ES6 的箭头函数下, call 和 apply 的失效, 对于箭头函数来说:

        // 函数体内的 this 对象, 就是定义时所在的对象, 而不是使用时所在的对象;
        // 不可以当作构造函数, 也就是说不可以使用 new 命令, 否则会抛出一个错误;
        // 【重点注意下】不可以使用 arguments 对象, 该对象在函数体内不存在. 如果要用, 可以用 Rest 参数代替;
        // 不可以使用 yield 命令, 因此箭头函数不能用作 Generator 函数;
        // 更多关于箭头函数的介绍在这里就不做过多介绍了, 详情可以查看 Arrow functions.

        // 总结
        // 经过上面的叙述, Call, Apply 和 Bind 在设置 this 指向, 声称与执行参数可变函数以及函数借用方面的强大之处已经非常明显. 作为一名 JavaScript 开发者, 你一定会经常见到这种用法, 或者在开发中尝试使用他. 请确保你已经很好的了解了如上所述的概念与用法.
        // https://zhuanlan.zhihu.com/p/26764679
        //【1】下面的代码能够正常执行出1。
        function moon() {
            console.log(1);
        }
        $(".sky").click(moon);
        // <button>Get Random Person</button>
        // <input type="text">

        var user = {
            data: [{
                name: "T. Woods",
                age: 37
            }, {
                name: "P. Mickelson",
                age: 43
            }],
            clickHandler: function(event) {
                var randomNum = ((Math.random() * 2 | 0) + 1) - 1; // random number between 0 and 1

                // 从 data 数组中随机选取一个名字填入 input 框内
                $("input").val(this.data[randomNum].name + " " + this.data[randomNum].age);
            }
        }

        // 给点击事件添加一个事件处理器
        // $("button").click(user.clickHandler);
        // 当你点击按钮时, 会发现一个报错信息: 因为 clickHandler() 方法中的 this 绑定的是按钮 HTML 内容的上下文, 因为这才是 clickHandler 方法的执行时的调用对象.
        $("button").click(user.clickHandler.bind(user));
    </script>
</body>

</html>